<template>
  <div class="page-wrapper">
    <el-table :data="tableData" v-loading="loading">
      <el-table-column prop="id" label="变量ID" />
      <el-table-column prop="name" label="变量名称" />
      <el-table-column prop="value" label="历史值" />
      <el-table-column prop="unit" label="单位" />
      <el-table-column prop="acqTime" label="采集时间" />
    </el-table>
    <Pagination :pageProps="pageProps" layout="prev, pager, next" @current-change="getTableData" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { getVarMsgHistory } from '@/api/settle'
import Pagination from '@/components/Pagination/Index.vue'

const route = useRoute()
const pageProps = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0,
})

const tableData = ref([{}])
const loading = ref(false)

const getTableData = () => {
  loading.value = true
  getVarMsgHistory({
    pageNum: pageProps.value.pageNum,
    pageSize: pageProps.value.pageSize,
    identJson: route.params.id,
    equipId: Number(route.params.equipId),
  })
    .then(res => {
      tableData.value = res.data.records ?? []
      pageProps.value.total = res.data.total
      loading.value = false
    })
    .catch(() => {
      tableData.value.length = 0
      pageProps.value.total = 0
      loading.value = false
    })
}

getTableData()

</script>
<style lang="scss" scoped>
.page-wrapper {
  margin: 20px;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 24px;
}
.query-wrapper {
  background: #F5F7FA;
  width: 100%;
  padding: 24px;
  display: flex;
  font-size: 14px;
  color: #000;
  align-items: center;
  margin-bottom: 24px;
  .query-input {
    width: 200px;
    margin-left: 12px;
    margin-right: 24px;
  }
  .btn {
    width: 112px;
    color: #fff;
  }
}
.link-text {
  color: #03CCA1;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 14;
  .icon {
    margin-right: 4px;
  }
}
</style>
